<template>
  <div>
    <div class="makeHeader">
      <el-row
        type="flex"
        justify="space-between"
        align="center"
        :gutter="20"
        style="width: 100%; margin-bottom: 10px"
      >
        <el-col :span="10" style="display: flex"
          ><span style="width: 100px; height: 40px; line-height: 40px">公司名称：</span
          ><el-input v-model="companyName"></el-input
        ></el-col>
        <el-col :span="7" style="display: flex"
          ><el-button type="primary" @click="searchHandler">查询</el-button
          ><el-button plain @click="resetHandler">重置</el-button></el-col
        >
        <el-col :span="7" style="display: flex"></el-col>
      </el-row>
      <el-row
        type="flex"
        justify="center"
        align="center"
        style="width: 100%; margin-bottom: 10px"
      >
        <el-col :span="2" style="display: flex"
          ><el-button type="primary" @click="addHandler">新增</el-button></el-col
        >
        <el-col :span="20" style="display: flex"></el-col>
        <el-col :span="2" :pull="1" style="display: flex"></el-col>
      </el-row>
    </div>

    <el-row class="contentDiv">
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
        height="720"
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column
          prop="companyName"
          label="公司名称"
          align="center"
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column
          prop="uscIdentifier"
          min-width="200"
          show-overflow-tooltip
          label="统一社会信用代码"
          align="center"
        />
        <el-table-column
          prop="principalName"
          min-width="200"
          show-overflow-tooltip
          label="负责人"
          align="center"
        />
        <el-table-column
          prop="contactNumber"
          min-width="200"
          show-overflow-tooltip
          label="联系电话"
          align="center"
        />
        <el-table-column
          label="操作"
          min-width="200"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="editHandler(scope.row)">编辑</el-button>
            <el-button type="text" style="color: red" @click="deleteHandler(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="footerDiv mt-10" style="text-align: right">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
    <!-- 编辑 -->
    <el-dialog
      :title="editTiele"
      :visible.sync="editDialogStatus"
      width="30%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @closed="closeEditDialogStatus"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item style="margin-top: 20px" label="公司名称" prop="companyName">
          <el-input placeholder="公司名称" v-model="ruleForm.companyName"> </el-input>
        </el-form-item>
        <el-form-item style="margin-top: 20px" label="公司编码:" prop="companyCode">
          <el-input
            :disabled="editTiele === '编辑'"
            placeholder="公司编码"
            v-model="ruleForm.companyCode"
          >
          </el-input>
        </el-form-item>

        <el-form-item
          style="margin-top: 20px"
          label="统一社会信用代码:"
          prop="uscIdentifier"
        >
          <el-input placeholder="统一社会信用代码" v-model="ruleForm.uscIdentifier">
          </el-input>
        </el-form-item>
        <el-form-item style="margin-top: 20px" label="责任人:" prop="principalId">
          <!-- <el-input placeholder="责任人" v-model="ruleForm.principalId"> </el-input> -->
          <el-select
            v-model="ruleForm.principalId"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in manOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-top: 20px" label="联系电话:" prop="contactNumber">
          <el-input placeholder="联系电话" v-model="ruleForm.contactNumber"> </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogStatus = false">取 消</el-button>
        <el-button type="primary" @click="editSaveHandler('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import {getCompany,companyDetail,saveCompany,updateCompany,deleteCompany} from '../../../http/companyMg.js'
import {
  getCompany,
  saveCompany,
  updateCompany,
  deleteCompany,
} from "/src/http/productSchedule/companyMg.js";
import { getEnableUserList } from "/src/http/commonApi.js";
export default {
  data() {
    return {
      dialogVisible: false,
      companyName: "",
      total: 0,
      pageSize: 10,
      currentPage: 1,
      renderData: [],
      manOptions: [],
      isSearch: false,
      ruleForm: {
        companyName: null,
        companyCode: null,

        uscIdentifier: null,
        principalId: null,
        contactNumber: null,
      },

      // edit
      editTiele: "",
      editDialogStatus: false,
      companyId: "",
      rules: {
        companyCode: [
          { required: true, message: "请输入公司编码", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" },
        ],
        companyName: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        uscIdentifier: [
          { required: true, message: "请输入统一社会信用代码", trigger: "blur" },
          {
            pattern: /^(?![IOZSV])[0-9A-HJ-NP-RT-UW-Y]{2}[0-9]{6}[0-9A-HJ-NP-RT-UW-Y]{10}$/,
            message: "请填写正确的统一社会信用代码，如：11320000MB151840XJ",
            trigger: "blur",
          },
        ],
        principalId: [{ required: true, message: "请输入责任人", trigger: "blur" }],
        contactNumber: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/,
            message: "请填写正确的手机号码",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {
    this.getEnableUserListApi(); //人员列表
    this.getCompanyApi();
  },

  methods: {
    // 搜索
    searchHandler() {
      this.isSearch = true;
      if (this.companyName === "") {
        this.$message({
          message: "请输入查询条件",
          type: "warning",
        });
      } else {
        this.getCompanyApi(1, this.pageSize, this.companyName);
      }
    },
    // 重置
    resetHandler() {
      this.getCompanyApi();
      this.companyName = "";
      this.isSearch = false;
    },
    // 新增
    addHandler() {
      this.editTiele = "新增";

      this.ruleForm.companyCode = null;
      this.ruleForm.companyName = null;
      this.ruleForm.uscIdentifier = null;
      this.ruleForm.principalId = null;
      this.ruleForm.contactNumber = null;
      this.companyId = null;
      this.editDialogStatus = true;
    },
    //   编辑
    editHandler(v) {
      this.editTiele = "编辑";
      this.ruleForm.companyName = v.companyName;
      this.ruleForm.companyCode = v.companyCode;

      this.ruleForm.uscIdentifier = v.uscIdentifier;
      this.ruleForm.principalId = v.principalId;
      this.ruleForm.contactNumber = v.contactNumber;

      this.editDialogStatus = true;
      this.companyId = v.id;
    },
    // 删除
    deleteHandler(v) {
      console.log(v);
      this.$confirm("此操作将永久删除该信息?", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteCompanyApi({ id: v });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 每页几条
    handleSizeChange(v) {
      this.pageSize = v;
      this.currentPage = 1;
      if (this.isSearch === true) {
        this.getCompanyApi(1, v, this.companyName);
      } else {
        this.getCompanyApi(1, v);
      }
    },
    // 分页
    handleCurrentChange(v) {
      this.currentPage = v;
      if (this.isSearch === true) {
        this.getCompanyApi(v, this.pageSize, this.companyName);
      } else {
        this.getCompanyApi(v, this.pageSize);
      }
    },
    // editDialog保存
    editSaveHandler(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = this.ruleForm;
          if (this.editTiele == "新增") {
            this.saveCompanyApi(params);
          } else {
            params.id = this.companyId;

            this.updateCompanyApi(params);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * 接口
     */
    // 分页查询公司
    getCompanyApi(pageNum, pageSize, companyName) {
      let params = { pageNum, pageSize, companyName };
      getCompany(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    // 保存公司
    saveCompanyApi(params) {
      saveCompany(params).then((res) => {
        if (res.code == 200) {
          this.getCompanyApi();
          this.$message.success("新增成功");
          this.editDialogStatus = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 编辑公司
    updateCompanyApi(params) {
      updateCompany(params).then((res) => {
        if (res.code == 200) {
          this.getCompanyApi(this.currentPage, this.pageSize, this.companyName);
          this.$message.success("编辑成功");
          this.editDialogStatus = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 删除公司
    deleteCompanyApi(params) {
      let currentPageIstrue;
      if (this.renderData.length == 1) {
        currentPageIstrue = true;
      }
      deleteCompany(params).then((res) => {
        if (res.code == 200) {
          if (currentPageIstrue) {
            this.currentPage = this.currentPage - 1;
          }
          this.getCompanyApi(this.currentPage, this.pageSize, this.companyName);
          this.$message.success("删除成功");
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 获取启用人员列表
    getEnableUserListApi() {
      getEnableUserList().then((res) => {
        if (res.code == 200) {
          this.manOptions = res.data;
        }
      });
    },
    closeEditDialogStatus() {
      this.$refs["ruleForm"].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.el-date-editor {
  margin: 0 10px;
}
.imgBox {
  position: relative;
  top: 0;
  left: 0;
  .uploadImg {
    position: absolute;
    top: 30%;
    left: 30%;
    visibility: hidden;
  }
}
.imgBox:hover .uploadImg {
  visibility: visible;
}
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-dialog__title) {
  color: #fff;
}
:deep(.el-form-item) {
  margin-bottom: 0;
}
// 图片上传
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.pDiv {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-right: 0px;
  border-radius: 4px 0 0 4px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  width: 13.7%;
}
:deep(.pSelect) {
  .el-input__inner {
    border-radius: 0 4px 4px 0;
    width: 107.5%;
  }
  .el-input__suffix {
    right: -5%;
  }
}
.mgb-10 {
  margin-bottom: 10px;
}
:deep(.el-input-group__prepend) {
  width: 17% !important;
}
</style>
